<template>
  <div class="app-container">
    <table>
      <thead>
      <tr>
        <th>评估项目</th>
        <th>数量</th>
        <th>单位</th>
        <th>KPI分</th>
        <th>结果</th>
        <th style="width: 100px">实际得分</th>
        <th style="width: 100px">实际结果</th>
        <th>备注</th>
      </tr>
      </thead>
      <tbody>
      <!-- 项目信息收集 -->
      <tr>
        <td rowspan="4">项目信息收集</td>
        <td>&lt;4</td>
        <td>次</td>
        <td>0</td>
        <td>不合格</td>
        <td rowspan="4">
          {{ form.collectScore }}
        </td>
        <td rowspan="4">
          <span v-if="form.collectScore >= 20">优秀</span>
          <span v-else-if="form.collectScore >= 15">良好</span>
          <span v-else-if="form.collectScore >= 8">合格</span>
          <span v-else-if="form.collectScore >= 0">不合格</span>
        </td>
        <td rowspan="4" class="remark">项目资金信息定义：时效内与公司业务相关并且有资质的资金信息，一类、同批计算1次。<br>项目资金收集：必须由不同学校的项目负责人给到才能分别计算积分。<br>当1个客户给到不能覆盖全新类型客户，必须提交客户资产资料佐证，如邮件、微信截图等，才能作为计分依据。<br>有效资金信息：需部长或者总经理确认。<br>注意：一个学校（二级学院）不允许重复出现＞3次，每人每年不低于50个学校（二级学院单独计算）。
        </td>
      </tr>
      <tr>
        <td class="orange-bg">4</td>
        <td class="orange-bg">次</td>
        <td class="orange-bg">8</td>
        <td class="orange-bg">合格</td>
      </tr>
      <tr>
        <td class="blue-bg">6</td>
        <td>次</td>
        <td class="blue-bg">15</td>
        <td>良好</td>
      </tr>
      <tr>
        <td>≥8</td>
        <td>次</td>
        <td>20</td>
        <td>优秀</td>
      </tr>

      <!-- 客户拜访量/邀约到公司 -->
      <tr>
        <td rowspan="4">客户拜访量/邀约到公司</td>
        <td>&lt;12</td>
        <td>次</td>
        <td>0</td>
        <td>不合格</td>
        <td rowspan="4">
          {{ form.visitScore }}
        </td>
        <td rowspan="4">
          <span v-if="form.visitScore >= 25">优秀</span>
          <span v-else-if="form.visitScore >= 20">良好</span>
          <span v-else-if="form.visitScore >= 12">合格</span>
          <span v-else-if="form.visitScore >= 0">不合格</span>
        </td>
        <td rowspan="4" class="remark">电话拜访与实际拜访、邀约来公司。（二级学院单独计算，相同学院、相同项目按1次计算）<br>拜访前有计划、有预约，拜访后有结果，提报信息完整以软件系统拜访记录统计数量为准。<br>一次拜访1分，四舍五入，单日一个客户只计算1次。<br>邀约客户到公司交流1次3分（本地客户）。以拜访记录为准。<br>备注：培训以二级学院整体计1次3分
        </td>
      </tr>
      <tr>
        <td class="orange-bg">12</td>
        <td class="orange-bg">次</td>
        <td class="orange-bg">12</td>
        <td class="orange-bg">合格</td>
      </tr>
      <tr>
        <td class="blue-bg">20</td>
        <td>次</td>
        <td class="blue-bg">20</td>
        <td>良好</td>
      </tr>
      <tr>
        <td>25</td>
        <td>次</td>
        <td>25</td>
        <td>优秀</td>
      </tr>

      <!-- 新增销售跟单 -->
      <tr>
        <td rowspan="4">新增销售跟单</td>
        <td>&lt;4</td>
        <td>个</td>
        <td>0</td>
        <td>不合格</td>
        <td rowspan="4">
          {{ form.merchandiserScore }}
        </td>
        <td rowspan="4">
          <span v-if="form.merchandiserScore >= 20">优秀</span>
          <span v-else-if="form.merchandiserScore >= 15">良好</span>
          <span v-else-if="form.merchandiserScore >= 8">合格</span>
          <span v-else-if="form.merchandiserScore >= 0">不合格</span>
        </td>
        <td rowspan="4" class="remark">以拜访记录的销售跟单数量为考核参考标准。<br>有明确的资金或者建设方向，并撰写或收集项目建设素材。（转发公司相关产品方案即为新增销售跟单）。（同类产品或同包项目算一单）
        </td>
      </tr>
      <tr>
        <td class="orange-bg">4</td>
        <td class="orange-bg">个</td>
        <td class="orange-bg">8</td>
        <td class="orange-bg">合格</td>
      </tr>
      <tr>
        <td>6</td>
        <td>个</td>
        <td>15</td>
        <td>良好</td>
      </tr>
      <tr>
        <td>≥8</td>
        <td>个</td>
        <td>20</td>
        <td>优秀</td>
      </tr>

      <!-- 新增销售机会 -->
      <tr>
        <td rowspan="4">新增销售机会</td>
        <td>1</td>
        <td>个</td>
        <td>3</td>
        <td>不合格</td>
        <td rowspan="4">
          {{ form.changeScore }}
        </td>
        <td rowspan="4">
          <span v-if="form.changeScore >= 27">优秀</span>
          <span v-else-if="form.changeScore >= 18">良好</span>
          <span v-else-if="form.changeScore >= 9">合格</span>
          <span v-else-if="form.changeScore >= 0">不合格</span>
        </td>
        <td rowspan="4" class="remark">以拜访记录录入的销售跟单数量为考核参考标准。</td>
      </tr>
      <tr>
        <td class="orange-bg">2</td>
        <td class="orange-bg">个</td>
        <td class="orange-bg">9</td>
        <td class="orange-bg">合格</td>
      </tr>
      <tr>
        <td>3</td>
        <td>个</td>
        <td>18</td>
        <td>良好</td>
      </tr>
      <tr>
        <td>4</td>
        <td>个</td>
        <td>27</td>
        <td>优秀</td>
      </tr>

      <!-- 日/周报 -->
      <tr>
        <td>日/周报</td>
        <td class="blue-bg">4</td>
        <td>次</td>
        <td class="blue-bg">4</td>
        <td>合格</td>
        <td>
          {{ form.weeklyScore }}
        </td>
        <td>
          <span v-if="form.weeklyScore === 4">合格</span>
          <span v-else-if="form.weeklyScore >= 0">不合格</span>
        </td>
        <td class="remark">日报：当日总结+清晰准确，第二日计划清晰1次不发扣1分<br>周报：周计划安排工作逻辑清晰即工作内容合理，总结有过程描述及执行结果；周日发：周一前发等周扣2分；一次不发强扣3分。
        </td>
      </tr>

      <!-- 其他项目 -->
      <tr>
        <td>服务大赛、展会等活动</td>
        <td>H</td>
        <td>次</td>
        <td>H*2</td>
        <td></td>
        <td>
          {{ form.activityScore }}
        </td>
        <td>
<!--          {{ form.activityScore }}-->
        </td>
        <td class="remark">竞赛、培训（20人以上），展会等活动</td>
      </tr>
      <tr>
        <td>商务标书制作及投标</td>
        <td>X</td>
        <td>个</td>
        <td>X*2</td>
        <td></td>
        <td>
          {{ form.tenderScore }}
        </td>
        <td>
<!--          {{ form.tenderScore }}-->
        </td>
        <td class="remark">投标活动参与标书制作及投标 2分（同一个设备算一个项目）</td>
      </tr>
      <tr>
        <td>协助代理商处理商务事宜</td>
        <td>Z</td>
        <td>个</td>
        <td>Z*2</td>
        <td></td>
        <td>
          {{ form.businessScore }}
        </td>
        <td>
<!--          {{ form.businessScore }}-->
        </td>
        <td class="remark">包括全流程协助投标，商务资料的对接及投标参与。帮助代理运维的当地业务发展、做技术支持、技术资料提供，陪同面对客户时，配合商务公关、市场拓展、价格维护、地域保护。
        </td>
      </tr>
      <tr>
        <td>媒体宣传</td>
        <td>M</td>
        <td>次</td>
        <td>M*1</td>
        <td></td>
        <td>
          <span>{{ form.mediaScore }}</span>
        </td>
        <td></td>
        <td class="remark">扣分项，包括群维护，朋友圈，抖音。视频号，缺少宣传册等等。最高3分，根据未完成情况扣3-5分，被公司点名直接扣5分
        </td>
      </tr>
      <tr>
        <td>纪律</td>
        <td>J</td>
        <td>次</td>
        <td>J*2</td>
        <td></td>
        <td>
          <span>{{ form.disciplineScore }}</span>
        </td>
        <td></td>
        <td class="remark">扣分项，包括迟到，早退，无故缺席，规定时间未完成，等违纪行为，根据情况扣1-5分。被公司点名直接扣5分
        </td>
      </tr>
      <!-- 新增销售机会 -->

      <!-- KPI总分 -->
      <tr>
        <td colspan="5" rowspan="3">KPI总分</td>
        <td colspan="1" rowspan="3">
          {{ form.totalScore }}
        </td>
        <td colspan="1">优秀</td>
        <td class="text-left">＞95【每个考核项目必须完成合格以上】</td>
      </tr>
      <tr>
        <td colspan="1">良好</td>
        <td class="text-left">75-95【每个考核项目必须完成合格以上】</td>
      </tr>
      <tr>
        <td colspan="1">合格</td>
        <td class="text-left">45-74</td>
      </tr>

      <tr>
        <td colspan="5" rowspan="3">备注</td>
        <td class="text-left" colspan="5" >
          {{ form.remark }}
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  name: "ExamineEditInfo",
  data() {
    return {
      inputWeekShow: true,
      inputValueWeek: false,
      // 显示的输入框
      inputShow: true,
      inputShowOther: true,
      // 输入框的值
      inputValue: '',
      inputValueOther: '',
      // 纪律分
      discipline: 0,
      // 宣传分
      publicize: 0,
      // 考核数据
      form: {
        collectScore: 0,
        visitScore: 0,
        merchandiserScore: 0,
        changeScore: 0,
        weeklyScore: 0,
        disciplineScore: 0,
        activityScore: 0,
        tenderScore: 0,
        businessScore: 0,
        totalScore: 0,
        mediaScore: 0,
      },
    }
  },
  props: ['info'],
  watch: {
    info: {
      deep: true,
      immediate: true,
      handler(newV) {
        this.form = { ...newV }
        // this.queryParams.facultyId = newV.id
        // this.getData()
      },
    },
  },
  created() {
    this.form = {...this.info}
  },
  methods: {},
}
</script>
<style scoped lang="scss">
table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

table td, table th {
  border: 1px solid #000;
  padding: 6px;
}

.orange-bg {
  background-color: #f90;
}

.blue-bg {
  background-color: #09f;
  color: white;
}

.remark {
  text-align: left;
  font-size: 0.9em;
  max-width: 400px;
}

.text-left {
  text-align: left;
}
</style>
